<template>
  <div ref="piechart" />
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'Piechart',
  data() {
    return {}
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      var trafficWay = [{
        name: '正高级教师',
        value: 237
      }, {
        name: '厨余垃圾',
        value: 485
      }, {
        name: '可回收物',
        value: 685
      }, {
        name: '其他垃圾',
        value: 342
      }, {
        name: '有害垃圾',
        value: 485
      }]
      var data = []
      var data2 = []
      for (var j = 0; j < 4; j++) {
        data2.push({
          value: 25,
          name: trafficWay[j].name,
          itemStyle: {
            normal: {
              borderWidth: 0,
              shadowBlur: 30
            }
          }
        },
        {
          value: 2,
          name: '',
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              color: 'rgba(0, 0, 0, 0)',
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 40
            }
          }
        })
      }

      var color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
      for (var i = 0; i < trafficWay.length; i++) {
        data.push({
          value: trafficWay[i].value,
          name: trafficWay[i].name,
          itemStyle: {
            normal: {
              borderWidth: 0,
              borderColor: color[i],
              shadowColor: color[i]
            }
          }
        },
        {
          value: 2,
          name: '',
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              color: 'rgba(0, 0, 0, 0)',
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 20
            }
          }
        })
      }
      var seriesOption = [{
        name: '',
        type: 'pie',
        clockWise: false,
        center: ['50%', '50%'],
        radius: ['60%', '65%'],
        hoverAnimation: false,
        itemStyle: {
          normal: {
            borderWidth: 30,
            borderColor: '#09191A'
          }
        },
        label: {
          normal: {
            positon: 'inner',
            show: false
          }
        },
        data: data
      }, {
        name: '',
        type: 'pie',
        clockWise: false,
        center: ['50%', '50%'],
        radius: ['50%', '51%'],
        hoverAnimation: false,
        itemStyle: {
          normal: {
            borderWidth: 30,
            borderColor: '#09191A'
          }
        },
        label: {
          normal: {
            positon: 'inner',
            show: false
          }
        },
        data: data2
      }]
      var myChart = echarts.init(this.$refs.piechart)
      var option = {
        color: color,
        title: [
          {
            text: '2518吨',
            top: '40%',
            textAlign: 'center',
            left: '50%',
            textStyle: {
              color: '#8FC889',
              fontSize: 24,
              fontWeight: '400'
            }
          }, {
            text: '垃圾总量',
            top: '53%',
            textAlign: 'center',
            left: '50%',
            textStyle: {
              color: '#8FC889',
              fontSize: 15,
              fontWeight: '400'
            }
          }
        ],
        tooltip: {
          show: false
        },
        // legend: [{
        //   icon: 'circle',
        //   orient: 'horizontal',
        //   // x: 'left',

        //   data: ['厨余垃圾', '可回收物'],

        //   right: '13%',
        //   bottom: '55%',
        //   align: 'left',
        //   textStyle: {
        //     rich: {
        //       a: {
        //         fontSize: 20,
        //         color: '#92BB87',
        //         verticalAlign: 'top',
        //         align: 'center',
        //         padding: [0, 15, 28, 0]
        //       },
        //       b: {
        //         fontSize: 15,
        //         color: '#fff',

        //         align: 'center',
        //         padding: [0, 15, 0, 0],
        //         lineHeight: 25
        //       }
        //     }
        //     // fontSize: 15,
        //     // fontWeight: '400'
        //   },
        //   itemGap: 20,
        //   // 回调函数 实现标志图形字体后边加上百分比
        //   formatter(name) {
        //     // console.log(option);
        //     const than = option.series[0].data // 获取series中的data
        //     let total = 0
        //     let tarValue
        //     for (let i = 0, l = than.length; i < l; i++) {
        //       total += than[i].value
        //       if (than[i].name === name) {
        //         tarValue = than[i].value
        //       }
        //     }
        //     const arr = [
        //       '{a|' + ((tarValue / total) * 100).toFixed(2) + '%' + '吨}',
        //       '{b|' + name + '}'

        //     ]
        //     return arr.join('\n')
        //   }
        // }, {
        //   icon: 'circle',
        //   orient: 'horizontal',
        //   // x: 'left',
        //   data: ['其他垃圾', '有害垃圾'],
        //   right: '13%',
        //   bottom: '30%',
        //   align: 'left',
        //   textStyle: {
        //     rich: {
        //       a: {
        //         fontSize: 20,
        //         color: '#92BB87',
        //         verticalAlign: 'top',
        //         align: 'center',
        //         padding: [0, 15, 28, 0]
        //       },
        //       b: {
        //         fontSize: 15,
        //         color: '#fff',

        //         align: 'center',
        //         padding: [0, 15, 0, 0],
        //         lineHeight: 25
        //       }
        //     }
        //   },
        //   itemGap: 20,
        //   formatter(name) {
        //     // console.log(option);
        //     const than = option.series[0].data // 获取series中的data
        //     let total = 0
        //     let tarValue
        //     for (let i = 0, l = than.length; i < l; i++) {
        //       total += than[i].value
        //       if (than[i].name === name) {
        //         tarValue = than[i].value
        //       }
        //     }
        //     const arr = [
        //       '{a|' + ((tarValue / total) * 100).toFixed(2) + '%' + '吨}',
        //       '{b|' + name + '}'

        //     ]
        //     return arr.join('\n')
        //   }
        // }
        // ],
        toolbox: {
          show: false
        },
        series: seriesOption
      }

      myChart.setOption(option)
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
</style>
